<template>
  <div class="child-second">
    <div>title: {{ title }}</div> 
    <div>count: {{ count }}</div>
    <ElButton type="primary" @click="ChildA">子组件调用父组件方法-属性</ElButton>
    <slot name="middle"></slot>
    <ElButton type="primary" @click="ChildB">子组件调用父组件方法-事件</ElButton>
    <!-- slot标签 默认插槽 没有name属性 -->
    <slot :num="count"></slot>
  </div>
</template>
<style>
.child-second{
  border: solid 2px red;
}
</style>
<script setup>
import { ref, defineProps, defineEmits } from 'vue'
// const title = ref("xxx")
// const props = defineProps(['title','xxxx'])
const props = defineProps({
  xxxx: {
    type: Function,
    default: () => {}
  },
  title: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['yyyy', 'close', 'onExcceed'])

const count = ref(12)
// const a = ()=>{
//     search()
// }
const ChildA = () => {
  console.log('ca - 1')
  console.log('ca - 2')
  console.log('ca - 3')
  // fatherA()
  if (props.xxxx) {
    props.xxxx(222, 333)
  }

  console.log('ca - 7')
  console.log('ca - 8')
  console.log('ca - 9')
}
const ChildB = () => {
  console.log('cb - 1')
  console.log('cb- 2')
  console.log('cb - 3')
  //   fatherB()
  //   emit 触发  发射  触发yyyy事件
  // console.log(emits)
  emits('yyyy', 444, 555)
  //   yyyy(）
  //    emits('yyyy')  @yyyy="fatherB
  //    fatherB()
  console.log('cb - 7')
  console.log('cb - 8')
  console.log('cb - 9')
}
// Vue3中事件系统削弱了 如果喜欢事件系统 可以使用第三方库如 EventEmitter mitt
// 消息总线 bus 事件总线
// 通过 属性与事件分别完成 子组件调用父组件方法

// 父组件调用子组件 类id 和expose的使用

const ChildC = (a) => {
  console.log('---1---')
  console.log('---2---', a)
  console.log('---3---')
}

defineExpose({ ChildC, ChildA, ChildB })
</script>
